import React, { useEffect, useState } from "react"
import Preview from "./Preview";
import LowCodeProvider from "./Provider";
import * as material from "../material/index";
import { Spin } from "antd";

const Outlet = ({request}:any)=>{
    const [loading,setLoading] = useState(false)
    const [schema,setSchema] = useState({});
    useEffect(()=>{
        setLoading(true)
        request().then(res=>{
            console.log('res',res)
            setSchema({...res.schema})
            setLoading(false)
        })
    },[])
    return <Spin spinning={loading}>
        <LowCodeProvider items={schema}  components={{
        ...material
    }}><Preview /></LowCodeProvider>
    </Spin>
}
export default Outlet